<template>
    <div style="width: 90%;margin:auto;height: 100%; display: flex;">
        <!-- 头像 -->
        <div style="width: 300px;height:100%; margin-top: 10px;">
        <div style="width: 300px;height: 250px; background-color: #fff;margin: auto;" >
            <img style="width: 150px; height: 150px;" src="../zizujian/time.png" alt="">
            <div style="position: relative; width: 150px; height: 200px;  margin-left: 150px;text-align: center;margin-top: -100px;">
                <p style="color: #000; font-size: 20px;font-weight: 400; ">{{$route.query.id }}</p> 
                   <p style=" color:darkgrey; font-size: 17px;"> 普通管理</p>
                </div>
               <hr style="width: 280px; margin: auto; margin-top: -90px;">
               <div style="margin-left: 10px; margin-top: 10px;">
                <p style="color: darkgrey;">上次登录时间：&emsp;&emsp;&emsp;<span style="color: black;">2022-9-3</span></p>
    
                
              <p style="color: darkgrey;">上次登录地点：&emsp;&emsp;&emsp;<span style="color: black;">上海</span></p>
               </div>
        </div>
        <div style="width: 300px;height: 416px;  margin-top: 10px;">
            <table border="1" cellspacing="0" style=" margin: auto;width: 100%;height: 416px; text-align: center;background-color: #fff;color: darkgrey;">
            <thead>
              <tr>
                <th>手机</th>
                <th>今日购买</th>
                <th>本月购买</th>
                <th>总购买</th>
              </tr>
              <tr v-for="(arr, index) in $store.state.guanlixito.arr" :key="index">
                <td>{{ arr.name }}</td>
               <td>{{ arr.jinrgomai }}</td>
                <td>{{ arr.benyuegomai }}</td>
                <td>{{ arr.jinrgomai + arr.benyuegomai }}</td>
                </tr>
            </thead>
          </table>
        </div>
    </div>
        <!-- 今日订单 -->
        <div style=" width: 80%; height: 100%; margin-top: 10px;">
    
        <div style=" width: 100%; height: 200px; display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-around;">
            <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(46,199,201);"><i class="el-icon-circle-check" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥122</h1>
                   <p style="color:darkgrey;">今日支付订单</p>
                </div>
            </div>
            <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(255,185,128);"><i class="el-icon-star-on" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥21</h1>
                   <p style="color:darkgrey;">今日收藏订单</p>
                </div>
            </div>  <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(90,177,239);"><i class="el-icon-s-goods" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥13</h1>
                   <p style="color:darkgrey;">今日未支付订单</p>
                </div>
            </div> 
             <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(46,199,201);"><i class="el-icon-circle-check" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥3834</h1>
                   <p style="color:darkgrey;">本月支付订单</p>
                </div>
            </div>  
            <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(255,185,128);"><i class="el-icon-star-on" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥122</h1>
                   <p style="color:darkgrey;">本月收藏订单</p>
                </div>
            </div>
            <div class="jingrdingdan">
                <div style="width: 40%;height: 100%; background-color:  rgb(90,177,239);"><i class="el-icon-s-goods" style=" color:#fff;font-size: 60px; border-radius: 50%;"></i></div>
                <div style="width: 60%;height: 100%; text-align: center;"> 
                    <h1 style="margin-top: 10px;">￥120</h1>
                   <p style="color:darkgrey;">本月未支付订单</p>
                </div>
            </div>
        </div>
        <div id="main1" style="width: 900px;height:200px;background-color: #fff; margin: auto;margin-top: 20px;"></div>
        <div style="width: 900px;height:236px;background-color: #fff; margin: auto;margin-top: 20px;display: flex;justify-content: space-around;">
            <div id="main" style="width: 440px;height:236px;background-color: #fff; " ></div>
            <div id="main2" style="width: 440px;height:236px;background-color: #fff; "></div>
        </div>
        
        </div>
    </div>
    </template>
    <script>
    import * as echarts from 'echarts';
    export default {
    data(){
    return{
       
    }
    },
    mounted(){
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    // 绘制图表
    var option1 = {
        // title: 图表标题
      title: {
        text: ''
      },
    //  tooltip: 提示框组件，鼠标悬停在数据点上时显示的提示信息
      tooltip: {
        trigger: 'axis'
      },
    //  legend: 图例组件，用于展示每个系列的名称和颜色
      legend: {
        data: ['小米', 'vivo', '华为', 'oppo', '苹果','三星',]
      },
    //   grid: 直角坐标系内绘图网格的相关设置，包括位置、大小等
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
    //   toolbox: 工具箱组件，提供一些常用的工具，如保存为图片等
      toolbox: {
        show: false,
        feature: {
          saveAsImage: {}
        }
      },
    //   xAxis: 直角坐标系中的横轴，通常为类目轴或数值轴
      xAxis: {
        type: 'category',
        data:[] ,
        boundaryGap: false,
       
      },
    //   yAxis: 直角坐标系中的纵轴，通常为数值轴
      yAxis: {
        type: 'value',
        data:[]   
      },
    //   series: 数据系列，可以有多个系列，每个系列包含名称、类型、数据等信息
      series: [
        {
          name: '小米',
          type: 'line',
          stack: 'Total',
          data: [1220, 1322, 1021, 1324, 2290, 2230, 2210]
        },
        {
          name: 'vivo',
          type: 'line',
          stack: 'Total',
          data: [2220, 1282, 1291, 2342, 2902, 3230, 3210]
        },
        {
          name: '华为',
          type: 'line',
          stack: 'Total',
          data: [1150, 2322, 2021, 1524, 2190, 3230, 2410]
        },
        {
          name: 'oppo',
          type: 'line',
          stack: 'Total',
          data: [1320, 2332, 3301, 2334, 1390, 3230, 3120]
        },
        {
          name: '苹果',
          type: 'line',
          stack: 'Total',
          data: [1820, 1932, 1901, 1934, 3290, 1330, 2320]
        },{
          name: '三星',
          type: 'line',
          stack: 'Total',
          data: [2200, 1820, 1910, 2340, 2900, 3300, 3100]
        },
      ]
    };
    var option = {
      legend: {},
      tooltip: {},
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ['product',  '新增用户', '活跃用户'],
        source: [
          { product: '周一',  '新增用户': 185.8, '活跃用户': 400},
          { product: '周二·',  '新增用户': 200.8, '活跃用户': 500},
          { product: '周三',  '新增用户': 300.8, '活跃用户': 555 },
          { product: '周四',  '新增用户': 185.8, '活跃用户': 444 },
          { product: '周五',  '新增用户': 99.4, '活跃用户': 666 },
          { product: '周六',  '新增用户': 77, '活跃用户': 450 },
          { product: '周天', '新增用户': 400, '活跃用户': 250 }
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }]
    };
    var option2 = {
      title: {
        text: '手机销量',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 2200, name: '小米' },
            { value: 4600, name: 'vivo' },
            { value: 3800, name: '华为' },
            { value: 1950, name: 'oppo' },
            { value: 6000, name: '苹果' },
            { value: 3050, name: '三星' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    
    },
    created(){
    },
    computed:{
    },
    methods:{
    },
    }
    </script>
    <style lang='less' scoped>
    .jingrdingdan{
        width: 28%;
        height: 66px;
        border-radius: 5px;
        display: flex;
        background-color: #fff;
    }
    td,
    th {
      border-top: 1px solid #e7e1e1;
      border-bottom: 1px solid #000;
      border-left: 0;
      border-right: 0;
    }
    </style>
    